import { nextTick, onUnmounted, onMounted, ref } from 'vue'

/**
 * el-table组件的内容自动滚动实现
 * @param tableRef 表格元素的 ref
 * @param delay 滚动间隔时间
 * @param scrollHeight 每次滚动的高度
 */
export function useScrollTable(tableRef: any, delay: number, scrollHeight: number) {
  let scrollTimer: any = null
  function startAutoScroll() {
    stopAutoScroll()
    const tableBody = tableRef.value?.$el.querySelector('.el-table__body-wrapper')
    const scrollBody = tableRef.value?.$el.querySelector('.el-scrollbar__wrap')
    scrollTimer = setInterval(() => {
      if (tableBody) {
        // // 每次向下滚动20像素（可根据实际行高调整）
        if (scrollBody.scrollTop + tableBody.clientHeight >= scrollBody.scrollHeight) {
          //   // 到底后回到顶部
          scrollBody.scrollTo({
            top: 0,
            behavior: 'smooth'
          })
        } else {
          scrollBody.scrollTo({
            top: scrollBody.scrollTop + scrollHeight,
            behavior: 'smooth'
          })
        }
      }
    }, delay) // 每100ms滚动一次，可根据需要调整速度
  }

  function stopAutoScroll() {
    if (scrollTimer) {
      clearInterval(scrollTimer)
      scrollTimer = null
    }
  }
  function addHoverListener() {
    const tableBody = tableRef.value?.$el.querySelector('.el-table__body-wrapper')
    if (tableBody) {
      tableBody.addEventListener('mouseenter', stopAutoScroll)
      tableBody.addEventListener('mouseleave', startAutoScroll)
    }
  }

  function removeHoverListener() {
    const tableBody = tableRef.value?.$el.querySelector('.el-table__body-wrapper')
    if (tableBody) {
      tableBody.removeEventListener('mouseenter', stopAutoScroll)
      tableBody.removeEventListener('mouseleave', startAutoScroll)
    }
  }
  onMounted(() => {
    nextTick(() => {
      startAutoScroll()
      addHoverListener()
    })
  })

  onUnmounted(() => {
    stopAutoScroll()
    removeHoverListener()
  })
}

/**
 * el-table组件的内容 滚动到指定的某一行
 * @param tableRef 表格元素的 ref
 * @returns scrollTable 参数:指定行的下标
 */
export function useSelectScroll(tableRef: any) {
  const selectRow = ref<any>(null)
  function scrollTable(index: number) {
    nextTick(() => {
      //先判断是否有选中项，如果有则清空选中项的颜色
      if (selectRow.value) {
        const cells = selectRow.value.querySelectorAll('td') // 获取当前行的所有 <td>
        cells.forEach((td: any) => {
          td.style.backgroundColor = '' // 直接设置 td 的背景色
        })
      }
      //重新根据传入的 props.currentIndex 进行查找到 selectRow.value
      selectRow.value = tableRef.value?.$el.querySelectorAll('.el-table__row')[index - 1]
      //判断是否查找到 selectRow.value，有则将selectRow.value滚动到可视区域的中间并上色
      if (selectRow.value) {
        const tableBody = tableRef.value?.$el.querySelector('.el-scrollbar__wrap')
        if (!tableBody) return
        tableBody.scrollTo({
          top: selectRow.value.offsetTop - tableBody.clientHeight / 2 + selectRow.value.clientHeight / 2,
          behavior: 'smooth'
        })
        const cells = selectRow.value.querySelectorAll('td') // 获取当前行的所有 <td>
        cells.forEach((td: any) => {
          td.style.backgroundColor = 'lightblue' // 直接设置 td 的背景色
        })
      }
    })
  }

  return { scrollTable }
}
